<template>
  <page-main>
    <el-form :inline="true" :model="searchForm" label-width="100" class="search-form">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item label="订单创建时间：">
            <!-- <el-date-picker
              v-model="searchForm.startDate"
              type="daterange"
              range-separator="至"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              start-placeholder="选择开始时间"
              end-placeholder="选择结束时间"
              @change="changeDate"
            /> -->
            <my-date-range v-model:start="searchForm.startDate" v-model:end="searchForm.endDate" type="datetimerange" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item label=" ">
            <el-button type="primary" @click="toSearch()">搜索</el-button>
            <el-button type="default" @click="toSearch('reset')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="应收对账" name="first">
        <table-received />
      </el-tab-pane>
      <el-tab-pane label="应付对账" name="second">
        <table-payable />
      </el-tab-pane>
    </el-tabs>
  </page-main>
</template>
<script lang="ts" setup>
import { ref,reactive,defineAsyncComponent } from 'vue'
const TableReceived = defineAsyncComponent(() => import('./received/index.vue'));
const TablePayable = defineAsyncComponent(() => import('./payable/index.vue'));

const activeName = ref('first')
const searchForm = reactive(
  {
    startDate: null,
    endDate: null,
  }
)
const list = reactive(
  {
    received: [],
    payable: [],
  }
);
const changeDate = val => {
  console.log(val);
}
const toSearch = type => {
  console.log(searchForm);
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>